<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pa15">

					<view class="mt15 area_block_1 pt15 pb15 pl35 pr35">
						<view class="flex_box aic">
							<view class="fs30 cor_000">拖车名称</view>
							<view class="item">
								<input type="text" v-model="title" class="ipt_01" placeholder="请输入拖车名称"
									placeholder-style="color: #B2B2B2 ;">
							</view>
							<image :lazy-load="true" src="/static/icon_arrow_6.png" class="vh ml20 img15"></image>
						</view>
					</view>

					<view class="mt15 area_block_1 pt35 pb35 pl25 pr25">
						<view class="ml10 fs30 cor_000">拖车载重</view>
						<view class="mt35">
							<radio-group @change="weightChange">
								<label class="radio dif aic fs30 cor_000" v-for="item,index in weights" :key="index">
									<radio :checked="(weightId - 1) === index" :value="String(item.id)"
										color="#F23A3A" />{{item.name}}
								</label>
							</radio-group>
						</view>
					</view>

					<view class="mt15 area_block_1 pt15 pb15 pl35 pr35">
						<view class="flex_box aic">
							<view class="fs30 cor_000">运费</view>
							<view class="item">
								<input type="digit" v-model="price" class="ipt_01" placeholder="请输入运费"
									placeholder-style="color: #B2B2B2 ;">
							</view>
							<view class="fs28 cor_000">元/公里</view>
							<!-- <image src="/static/icon_arrow_6.png" class="vh ml20 img15"></image> -->
						</view>
					</view>

					<view class="mt15 area_block_1 pt15 pb15 pl35 pr35">
						<view class="flex_box aic">
							<view class="w170 fs30 cor_000">所在区域</view>
							<view class="item">
								<view class="sel_area_sty">
									<view class="" @click="getSSQData();">{{address}}</view>
									<u-select v-model="show" mode="mutil-column-auto" :list="cityTree"
										@confirm="confirm">
									</u-select>
								</view>
							</view>
							<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
						</view>
					</view>


					<view class="mt15 area_block_1 pt15 pb15 pl35 pr35">
						<view class=" flex_box aic">
							<view class="fs30 cor_000">联系电话</view>
							<view class="item">
								<input type="number" v-model="phone" class="ipt_01" placeholder="请输入联系电话"
									placeholder-style="color: #B2B2B2 ;">
							</view>
							<image :lazy-load="true" src="/static/icon_arrow_6.png" class="vh ml20 img15"></image>
						</view>
					</view>

					<view class="mt15 pa35 area_block_1">
						<view class="fs30 cor_000">拖车图片</view>
						<view class=" mt35 df fw">
							<image :src="imgPath ? imgPath : '/static/icon_file_img.png'" class="vt img16"
								:lazy-load="true" @tap="uploadFile()"></image>
						</view>
						<view class="mt35 fs30 cor_F23">只允许上传一张图片</view>
					</view>

				</view>
			</view>
			<!-- 保存-按钮 -->
			<view class="consult_immediately_btn" @tap="updateTrailerPage">保存</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getTrailerFilterApi,
		getTrailerDetailApi,
		updateTrailerPageApi,
		uploadImgApi,
		getCityTreeApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				id: '',
				region: ['请选择地区', '', ''],
				regionColor: true,
				imgPath: '',
				weights: [],
				cityTree: [],
				sheng_index: 0,
				phone: '',
				title: '',
				name: '',
				price: '',
				imgPath: '',
				weightId: 0,
				cityId: 0,
				cityText: '',
				show: false,
				address: '获取省市区数据'
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getTrailerFilter();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/my_trailer/my_trailer'
		    })
			return true;
		},
		methods: {
			getSSQData: function() {
				this.show = true
			},

			confirm: function(e) {
				this.cityId = e[2].value;
				this.address = e[0].label + e[1].label + e[2].label;
			},

			getTrailerFilter() {
				let that = this;
				showLoading('加载中');
				getTrailerFilterApi({

				}).then(res => {
					that.weights = res.data.weights;
					that.cityTree = res.data.proList;
					getTrailerDetailApi({
						id: that.id
					}).then(result => {
						that.title = result.data.title;
						that.weightId = result.data.weightId;
						that.price = result.data.price;
						that.cityId = result.data.cityId;
						that.phone = result.data.phone;
						that.imgPath = result.data.imgPath;


						// for (let i in that.cityTree) {
						// 	for (let j in that.cityTree[i].children) {
						// 		if (that.cityTree[i].children[j].value == that.cityId) {
						// 			that.address = that.cityTree[i].label + that.cityTree[i].children[j].label
						// 			break;
						// 		}
						// 	}
						// }
						for (let i in this.cityTree) {
							if ((this.cityTree[i].value + '').substring(0, 2) == (this.cityId + '')
								.substring(0, 2)) {
								console.log('aaaa，找到你了');
								for (let j in this.cityTree[i].children) {
									for (let k in this.cityTree[i].children[j].children) {
										if (this.cityTree[i].children[j].children[k].value == this
											.cityId) {
											this.address = this.cityTree[i].label + this.cityTree[i]
												.children[j].label + this.cityTree[i].children[j].children[
													k].label
											break;
										}
									}
								}
							}
						}
					}).catch(error => {

					})

					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			weightChange(e) {
				this.weightId = e.detail.value;
			},


			uploadFile() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						showLoading('上传中');
						uploadImgApi({
							file: res.tempFilePaths[0],
							id: 7
						}).then(res => {
							that.imgPath = res.data;
							hideLoading();
						}).catch(err => {
							hideLoading();
						})
					}
				});
			},

			updateTrailerPage() {
				let that = this;
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					toast('手机号不合法，请重新输入');
					return false;
				}
				if (!this.title) {
					toast('请输入拖车名称');
					return false;
				}
				if (this.weightId == 0) {
					this.weightId = this.weights[0].id;
				}
				if (!this.cityId && !this.region_code[2]) {
					toast('请选择服务区域');
					return false;
				}
				if (!this.price) {
					toast('请填写价格');
					return false;
				}

				if (!this.imgPath) {
					toast('请上传拖车照片');
					return false;
				}
				showLoading('提交中');
				updateTrailerPageApi({
					userId: uni.getStorageSync('userId'),
					id: this.id,
					title: this.title,
					weightId: this.weightId,
					price: this.price,
					cityId: this.cityId ? this.cityId : this.region_code[2],
					price: that.price,
					phone: that.phone,
					imgPath: that.imgPath
				}).then(res => {
					toast('信息提交成功！');
					hideLoading();
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/my_trailer/my_trailer'
						})
					}, 2000)
				}).catch(err => {
					hideLoading();
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000;
		background-color: #fff;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000;
		background: transparent;
	}
</style>
